<template>
  <div>
    <a-button-group class="timeChoose">
      <a-button :type="timeNum===1?'primary':''" class="timeButton" @click="timeChange(1)">年</a-button>
      <a-button :type="timeNum===2?'primary':''" class="timeButton" @click="timeChange(2)">月</a-button>
    </a-button-group>
    <a-date-picker :mode="timeTypes[timeNum].mode"
                   v-model="dateValue"
                   @panelChange="panelChangeHandler"
                   :placeholder="timeTypes[timeNum].selectP"
                   :open="dateOpen"
                   :format="timeTypes[timeNum].format"
                   @openChange="handleOpenChange"/>
    <a-button class="download" v-if="downloadBtn">下载</a-button>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props: {
    downloadBtn: {
      type: Boolean,
      default: false
    },
    defaultDate: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      timeNum: 2,
      timeSelectShow: false,
      dateOpen: false,
      dateValue: moment(),
      timeTypes: {
        1: {name: '年', key: 'year', selectP: "年份选择", mode: "year", format: "YYYY"},
        2: {name: '月', key: 'month', selectP: "月份选择", mode: "month", format: "YYYY-MM"},
      },
      moment
    }
  },
  created(){
    //更新默认日期信息
    this.completeParams(this.defaultDate);
    if(this.defaultDate){
      this.dateValue = moment(`${this.defaultDate.year}-${this.defaultDate.month}`);
    }
  },
  mounted() {

  },
  methods: {
    timeChange: function (e) {
      this.timeNum = e;
      this.$emit('typeChange', this.timeTypes[this.timeNum]);
      this.completeParams();
    },
    panelChangeHandler(e) {
      this.dateOpen = false;
      this.dateValue = e;
      this.completeParams();
    },
    handleOpenChange(e) {
      this.dateOpen = e;
    },
    completeParams(defaultDate) {
      let params = {year: '', month: ''};
      params.year = this.dateValue.format("YYYY");
      params.month = this.timeNum === 2 ? this.dateValue.format("MM") : '';
      if(defaultDate){
        params = defaultDate
      }
      this.$emit('change', params);
    }
  }

}
</script>

<style scoped>
.timeChoose {
  margin-right: 20px;
  font-size: 14px;
  color: #FFFFFF;
}

.ant-btn-group .ant-btn {
}

.ant-btn-group > .ant-btn:first-child:not(:last-child) {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
}

.ant-btn-group > .ant-btn:last-child:not(:first-child) {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
}

.ant-btn-group .ant-btn-primary:last-child:not(:first-child) {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background: #6190F7;
  box-shadow: inset 0 2px 4px 0 rgba(60, 106, 194, 0.80);
  border-radius: 0 12px 12px 0;
}

.ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
  background: #6190F7;
}

.download {
  display: inline-block;
  margin-left: 20px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #FFFFFF;
  background: #6190F7;
  box-shadow: 0 4px 8px 0 rgba(60, 106, 194, 0.15), 0 2px 4px 0 rgba(60, 106, 194, 0.30);
  border-radius: 12px;
}

.timeButton {
  padding: 0 24px
}

.timePicker >>> .ant-input {
  box-shadow: 0 2px 4px 0 rgba(39, 39, 42, 0.20);
  border-radius: 12px
}

.timeSelect {
  width: 240px;
  margin-right: 20px;
}
</style>
